<template>
  <div class="im-setting">
    <!-- 开启在线客服 -->
    <div class="im-setting-switch-item">
      <div>
        <h4>
          开启在线客服
          <el-tooltip placement="bottom">
            <div class="im-setting-tip" slot="content">
              <p>此链接可以包装成按钮样式，放置在官网/公众号或其他</p>
              <p>网页中。客户点击后，即可使用 [在线客服] 咨询服务</p>
            </div>
            <i class="el-icon-warning iconWarning"></i>
          </el-tooltip>
        </h4>
        <div class="Copywriter">
          开启在线客服功能，在自助门户、超级二维码右下角展示在线客服入口
        </div>
        <div class="Copywriter">
          在线客服链接：
          <span
            v-if="GetRules.protalUrl"
            @click="outlineShare(GetRules.protalUrl)"
            class="href"
          >
            {{ GetRules.protalUrl }}
          </span>
          ，客户可点击链接进入在线客服咨询页面。
        </div>
      </div>
      <el-switch
        v-model="enabled"
        :active-value="1"
        :inactive-value="0"
        :active-text="enabled ? '启用' : '禁用'"
        @change="changeEnabled(enabled)"
      />
    </div>

    <!-- 在线客服设置 -->
    <div class="im-setting-table">
      <div class="im-setting-table-header">
        <div class="im-setting-table-header-title">
          <h4>
            在线客服人员设置
            <el-tooltip placement="top">
              <div class="im-setting-tip" slot="content">
                <p>将客服与员工账号绑定，员工在登录后可在</p>
                <p>[服务台-在线客服] 中，接受/发送客户消息；</p>
                <br />
                <p>开通IM后默认5个客服，如需增加，请联系</p>
                <p>客户经理</p>
              </div>
              <i class="el-icon-warning"></i>
            </el-tooltip>
          </h4>
        </div>
      </div>

      <el-table :data="list" stripe border empty-text="暂无数据">
        <el-table-column
          prop="customerServiceNumber"
          width="120"
          label="客服编号"
          align="center"
        />
        <el-table-column
          prop="customerServiceName"
          width="120"
          label="客服名称"
          align="center"
        />
        <el-table-column
          prop="relationUserName"
          label="绑定账号"
          align="center"
        >
          <template slot-scope="scope">
            <template v-if="isOpenData">
              <open-data
                type="userName"
                :openid="scope.row.relationUserStaffId"
              ></open-data>
            </template>
            <template v-else>
              {{ scope.row.relationUserName }}
            </template>
          </template>
        </el-table-column>
        <el-table-column prop="remark" label="说明" align="center" />
        <el-table-column label="操作" align="center" width="150">
          <template slot-scope="scope">
            <el-button type="text" @click="showEditDialog(scope.row)"
            >编辑</el-button
            >
            <el-button
              v-if="scope.row.relationUserId"
              type="text"
              style="color: #fb602c !important"
              @click="unBind(scope.row)"
            >解绑</el-button
            >
            <el-button v-else type="text" @click="bind(scope.row)"
            >绑定</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </div>

    <!-- 会话分配规则 -->
    <div class="im-setting-table">
      <div class="im-setting-table-header">
        <div>
          <h4>
            会话分配规则
            <el-tooltip placement="top">
              <div class="im-setting-tip" slot="content">
                <p>您可通过客户字段信息、联系人字段信息，</p>
                <p>来配置您客户会话的分配规则。</p>
                <p>分配规则会按优先级高低，逐级向下匹配。</p>
              </div>
              <i class="el-icon-warning"></i>
            </el-tooltip>
          </h4>

          <div class="Copywriter">请在此处配置您客户会话的分配规则。</div>
        </div>
        <el-button
          @click="SessionRules({}, 'add')"
          type="primary"
          icon="el-icon-plus"
        >
          新建
        </el-button>
      </div>

      <el-table :data="DistributeRules" stripe border empty-text="暂无数据">
        <el-table-column
          prop="level"
          width="100"
          label="优先级"
          align="center"
        ></el-table-column>
        <el-table-column prop="ruleName" label="规则名称" align="center">
        </el-table-column>
        <el-table-column label="操作" align="center" width="200">
          <template slot-scope="scope">
            <div class="Operation">
              <!-- 默认系统配置，不可编辑和删除 -->
              <i
                @click="SessionRules(scope.row, 'edit')"
                class="el-icon-edit"
              ></i>
              <i
                v-if="scope.row.isSystem !== 1"
                @click="SessionRules(scope.row, 'close')"
                class="el-icon-close"
              ></i>
              <i
                @click="SessionRules(scope.row, 'up', scope.$index)"
                class="iconfont icon-long-arrow-up"
              ></i>
              <i
                @click="SessionRules(scope.row, 'down', scope.$index)"
                class="iconfont icon-long-arrow-down"
              ></i>
            </div>
          </template>
        </el-table-column>
        <el-table-column
          label="启用/禁用"
          align="center"
          width="100"
          :resizable="false"
        >
          <template slot-scope="scope">
            <el-switch
              v-if="scope.row.isSystem !== 1"
              v-model="scope.row.isEnabled"
              @change="SessionRules(scope.row, 'switch')"
            ></el-switch>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <!-- 在线客服欢迎语设置 -->
    <div class="im-setting-switch-item">
      <div class="welcome-setting">
        <h4>自动回复设置</h4>
        <div class="welcome-container">
          当客户进入在线咨询会话页面时，给用户发送欢迎语：
          <el-input
            class="welcome-content"
            v-model="config.welcomeMessage"
            placeholder="请输入欢迎语"
          />
          <el-button type="primary" @click="save" :disabled="pending"
          >保存</el-button
          >
        </div>
      </div>
    </div>

    <!-- 微信客服设置 -->
    <!-- 该配置在开启微信客服时展示； -->
    <div v-if="isOpenWeChatService" class="desk-setting-table">
      <h4>
        微信客服设置
        <wei-xin-apply-trail-feature-tag v-if="isNotPayed" />
      </h4>

      <div>
        <template v-if="hasWxAuth">
          <div class="Copywriter" style="margin-bottom: 8px">
            您已授权开通了售后宝微信客服，系统已自动生成以下微信客服链接；客户点击微信客服链接，可直接在微信上发起咨询
          </div>
        </template>
        <template v-else>
          <p>
            开通微信客服后，可以在在线客服上接受微信客服消息，点击下方开通。
          </p>
          <p>授权后，将会默认帮您创建5位微信客服。</p>
          <el-button type="primary" @click="wxDialogVisible = true"
          >授权开通微信客服</el-button
          >
        </template>
      </div>
      <el-table
        v-if="hasWxAuth"
        :data="wechatList"
        stripe
        border
        empty-text="暂无数据"
      >
        <el-table-column prop="wechatServiceName" label="微信客服名称" />
        <el-table-column label="微信客服链接" min-width="200">
          <template slot-scope="scope">
            <span @click="copy(scope.row.wechatServiceUrl)">{{
              scope.row.wechatServiceUrl
            }}</span>
          </template>
        </el-table-column>
        <!-- <el-table-column
            label="订阅客服"
            min-width="200"
            show-overflow-tooltip
          >
            <template slot-scope="scope">
              <span>{{
                getSubscribeCustomerService(scope.row.subscribeCustomerService)
              }}</span>
            </template>
          </el-table-column> -->
        <el-table-column prop="remark" label="说明" />
        <el-table-column label="操作" align="center" width="150">
          <template slot-scope="scope">
            <el-button
              type="text"
              @click="showEditDialog(scope.row, 'weChat')"
            >编辑</el-button
            >
            <!-- <el-button type="text" @click="showSubscribeDialog(scope.row)"
                >订阅</el-button
              > -->
          </template>
        </el-table-column>
      </el-table>
    </div>

    <!-- 投放渠道管理 -->
    <!-- 该配置在开启微信客服时展示； -->
    <div class="im-setting-table">
      <div class="im-setting-table-header">
        <div>
          <h4>投放渠道管理</h4>

          <div class="Copywriter">
            请添加公司投放客服入口的渠道，并给每个渠道选择对应的客服链接，以便于后续统计
          </div>
        </div>
        <el-button
          @click="Channel({}, 'add')"
          type="primary"
          icon="el-icon-plus"
        >
          新建
        </el-button>
      </div>

      <el-table :data="AllPutChannel" stripe border empty-text="暂无数据">
        <el-table-column
          prop="channelName"
          label="投放渠道"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="relationName"
          label="客服链接（名称）"
          align="center"
          width="200"
        >
        </el-table-column>
        <el-table-column
          prop="remark"
          label="说明"
          align="center"
          width="400"
        ></el-table-column>
        <el-table-column label="操作" align="center" width="150">
          <template slot-scope="scope">
            <el-button @click="Channel(scope.row, 'edit')" type="text">
              编辑
            </el-button>
            <!-- isSystem 1 为系统默认配置，不可删除 -->
            <el-button
              v-if="scope.row.isSystem === 0"
              type="text"
              style="color: #f56c6c !important"
              @click="Channel(scope.row, 'delete')"
            >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </div>

    <!-- 编辑客服名称的对话框 -->
    <el-dialog
      :title="type == 'weChat' ? '编辑微信客服' : '编辑'"
      :visible.sync="editDialogVisible"
      width="40%"
      @close="editDialogClosed"
    >
      <!-- 内容主体区域 -->
      <el-form
        :model="editForm"
        :rules="editFormRules"
        ref="editFormRef"
        
        label-position="top"
      >
        <template v-if="type == 'weChat'">
          <el-form-item label="微信客服名称" prop="wechatServiceName">
            <el-input
              v-model="editForm.wechatServiceName"
              placeholder="请输入"
            ></el-input>
          </el-form-item>
        </template>
        <template v-else>
          <el-form-item label="客服名称" prop="customerServiceName">
            <el-input
              v-model="editForm.customerServiceName"
              placeholder="请输入"
            ></el-input>
          </el-form-item>
        </template>
        <el-form-item label="说明" prop="remark">
          <el-input
            resize="none"
            type="textarea"
            :autosize="{ minRows: 2, maxRows: 4 }"
            v-model="editForm.remark"
            placeholder="请输入"
          ></el-input>
        </el-form-item>
      </el-form>
      <!-- 底部区域 -->
      <span slot="footer" class="dialog-footer">
        <el-button @click="editDialogVisible = false">关闭</el-button>
        <el-button type="primary" @click="edit">保存</el-button>
      </span>
    </el-dialog>

    <!-- 订阅客服对话框 -->
    <el-dialog
      title="设置订阅客服"
      :visible.sync="subscribeDialogVisible"
      width="40%"
      @close="subscribeDialogClosed"
    >
      <!-- 内容主体区域 -->
      <el-form
        :model="subscribeForm"
        :rules="subscribeFormRules"
        ref="subscribeFormRef"
        
        label-position="top"
      >
        <el-form-item label="订阅客服" prop="subscribeCustomerService">
          <el-select
            class="select-customer-service"
            v-model="subscribeForm.subscribeCustomerService"
            multiple
            placeholder="请选择"
          >
            <el-option
              v-for="item in customerServiceNumbers"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <!-- 底部区域 -->
      <span slot="footer" class="dialog-footer">
        <el-button @click="subscribeDialogVisible = false"
        >关闭</el-button
        >
        <el-button type="primary" @click="subscribe">保存</el-button>
      </span>
    </el-dialog>

    <!-- 微信客服授权对话框 -->
    <el-dialog
      class="wx_auth_dialog"
      title="授权开通微信客服"
      :visible.sync="wxDialogVisible"
      width="40%"
      @close="wxDialogClosed"
    >
      <!-- 内容主体区域 -->
      <el-form
        :model="wxForm"
        :rules="wxFormRules"
        ref="wxFormRef"
        
        label-position="top"
      >
        <p>
          还未授权微信客服？<a
            target="_blank"
            href="https://work.weixin.qq.com/kf"
          >去微信客服后台中授权</a
          >
        </p>
        <p>已经完成微信客服的授权，请在下方输入企业ID进行开通。</p>
        <el-form-item label="企业ID" prop="corpId">
          <el-input
            v-model="wxForm.corpId"
            placeholder="请输入"
          ></el-input>
          <a target="_blank" :href="help_link"
          >如何获取企业ID？</a
          >
        </el-form-item>
      </el-form>
      <!-- 底部区域 -->
      <span slot="footer" class="dialog-footer">
        <el-button @click="wxDialogVisible = false">关闭</el-button>
        <el-button type="primary" @click="openIm">开通</el-button>
      </span>
    </el-dialog>

    <!-- 微信客服授权提示框 -->
    <el-dialog
      class="wx_auth_dialog"
      title="提示"
      :visible.sync="wxDialogVisibleTips"
      width="40%"
    >
      <p>扫码后进入微信客服页面，请扫码进行授权。</p>
      <!-- 底部区域 -->
      <span slot="footer" class="dialog-footer">
        <el-button @click="wxDialogVisibleTips = false">关闭</el-button>
        <el-button type="primary" @click="Authorization"
        >我已授权成功</el-button
        >
      </span>
    </el-dialog>

    <!-- 订阅客服对话框 -->
    <el-dialog
      :title="ChannelDialogTitle"
      :visible.sync="isChannel"
      width="40%"
      @close="ChannelClosed"
    >
      <!-- 投放渠道管理 -->
      <el-form
        :model="ChannelForm"
        :rules="ChannelFormRules"
        ref="ChannelRef"
        
        label-position="top"
      >
        <el-form-item label="渠道名称" prop="channelName">
          <!-- 默认投放渠道名称不可修改 -->
          <el-input
            :disabled="!(ChannelisSystem === 0)"
            v-model="ChannelForm.channelName"
            placeholder="请输入"
          ></el-input>
        </el-form-item>
        <el-form-item label="客服链接" prop="relationNo">
          <el-select
            class="select-customer-service"
            v-model="ChannelForm.relationNo"
            @change="relationNoChange"
            placeholder="请选择"
          >
            <el-option
              v-for="item in RelationOptions"
              :key="item.optionNo"
              :label="item.optionName"
              :value="item.optionNo"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="说明" prop="remark">
          <el-input
            resize="none"
            type="textarea"
            v-model="ChannelForm.remark"
            placeholder="请输入"
          ></el-input>
        </el-form-item>
      </el-form>
      <!-- 底部区域 -->
      <span slot="footer" class="dialog-footer">
        <el-button @click="isChannel = false">取消</el-button>
        <el-button
          :loading="ChannelLoading"
          type="primary"
          @click="Channel({}, 'save')"
        >
          保存
        </el-button>
      </span>
    </el-dialog>

    <!-- 会话分配规则对话框 -->
    <el-dialog
      :title="DistributeDialogTitle"
      :visible.sync="isDistribute"
      width="45%"
      @close="DistributeClosed"
    >
      <el-form
        :model="DistributeForm"
        :rules="DistributeFormRules"
        ref="Distribute"
        
        label-position="top"
      >
        <el-form-item label="规则名称" prop="ruleName">
          <el-input
            v-model="DistributeForm.ruleName"
            placeholder="请输入"
          ></el-input>
        </el-form-item>
        <el-form-item label="规则类型" prop="ruleType">
          <el-radio-group
            @change="ruleTypeChange"
            v-model="DistributeForm.ruleType"
          >
            <el-radio :label="1">按客户信息</el-radio>
            <el-radio :label="2">按联系人信息</el-radio>
            <el-radio :label="3">按客服链接</el-radio>
          </el-radio-group>
        </el-form-item>
        <div class="OperationContent">
          <!-- 按客户信息 -->
          <template v-if="DistributeForm.ruleType === 1">
            <el-form-item
              prop="distributeCondition"
              label="当客户字段"
              :key="Math.random()"
            >
              <div class="selects">
                <imSettingChoice
                  :options="optionList1.setting.dataSource"
                  :equals-maps="optionList1.equals"
                  :category="ApplyOptions"
                  :rules="Rules"
                  :distribute-form="DistributeForm"
                  :find="optionList1"
                />
              </div>
            </el-form-item>
            <el-form-item
              label="分配给"
              prop="candidateids"
              :key="Math.random()"
            >
              <el-select
                v-model="candidateids"
                style="width: 100%"
                multiple
                placeholder="请选择"
              >
                <el-option
                  v-for="item in list"
                  :key="item.customerServiceNumber"
                  :label="item.customerServiceName"
                  :value="item.customerServiceNumber"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item
              label="分配优先级"
              prop="distributePriority"
              :key="Math.random()"
            >
              <el-select
                style="width: 100%"
                v-model="DistributeForm.distributePriority"
                placeholder="请选择"
              >
                <el-option
                  v-for="item in Rules.distributePriority"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item v-if="hasWxAuth" label="" :key="Math.random()">
              <el-checkbox v-model="unRelationExcept"
              >未绑定账号的客服不参与分配</el-checkbox
              >
            </el-form-item>
          </template>
          <!-- 按联系人信息 -->
          <template v-if="DistributeForm.ruleType === 2">
            <el-form-item label="当联系人" :key="Math.random()">
              <div class="selects">
                <el-select
                  style="width: 100px"
                  v-model="DistributeForm.distributeCondition.unknown"
                  placeholder="请选择"
                >
                  <el-option
                    v-for="i in Rules.unknown"
                    :key="i.value"
                    :label="i.label"
                    :value="i.value"
                  >
                  </el-option>
                </el-select>
              </div>
            </el-form-item>

            <el-form-item
              prop="distributeCondition"
              label="且字段"
              :key="Math.random()"
              v-show="DistributeForm.distributeCondition.unknown === 0"
            >
              <div class="selects">
                <imSettingChoice
                  :options="optionList2.options"
                  :equals-maps="optionList2.equals"
                  :category="Rules.field"
                  :rules="Rules"
                  :distribute-form="DistributeForm"
                  :find="optionList2"
                />
              </div>
            </el-form-item>

            <el-form-item
              label="分配给"
              multiple
              prop="candidateids"
              :key="Math.random()"
            >
              <el-select
                style="width: 100%"
                v-model="candidateids"
                multiple
                placeholder="请选择"
              >
                <el-option
                  v-for="item in list"
                  :key="item.customerServiceNumber"
                  :label="item.customerServiceName"
                  :value="item.customerServiceNumber"
                ></el-option>
              </el-select>
            </el-form-item>

            <el-form-item
              label="分配优先级"
              prop="distributePriority"
              :key="Math.random()"
            >
              <el-select
                style="width: 100%"
                v-model="DistributeForm.distributePriority"
                placeholder="请选择"
              >
                <el-option
                  v-for="item in Rules.distributePriority"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item v-if="hasWxAuth" label="" :key="Math.random()">
              <el-checkbox v-model="unRelationExcept"
              >未绑定账号的客服不参与分配</el-checkbox
              >
            </el-form-item>
          </template>
          <!-- 按客服链接 -->
          <template v-if="DistributeForm.ruleType === 3">
            <el-form-item
              prop="distributeConditionOption"
              label="当客服链接为"
              :key="Math.random()"
            >
              <el-select
                style="width: 100%"
                v-model="DistributeForm.distributeCondition.option"
                multiple
                placeholder="请选择"
              >
                <el-option
                  v-for="item in RelationOptions"
                  :key="item.optionNo"
                  :label="item.optionName"
                  :value="item.optionNo"
                >
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item
              label="分配给"
              multiple
              prop="candidateids"
              :key="Math.random()"
            >
              <el-select
                style="width: 100%"
                v-model="candidateids"
                multiple
                placeholder="请选择"
              >
                <el-option
                  v-for="item in list"
                  :key="item.customerServiceNumber"
                  :label="item.customerServiceName"
                  :value="item.customerServiceNumber"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item
              label="分配优先级"
              prop="distributePriority"
              :key="Math.random()"
            >
              <el-select
                style="width: 100%"
                v-model="DistributeForm.distributePriority"
                placeholder="请选择"
              >
                <el-option
                  v-for="item in Rules.distributePriority"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item v-if="hasWxAuth" label="" :key="Math.random()">
              <el-checkbox v-model="unRelationExcept"
              >未绑定账号的客服不参与分配</el-checkbox
              >
            </el-form-item>
          </template>
        </div>
      </el-form>
      <!-- 底部区域 -->
      <span slot="footer" class="dialog-footer">
        <el-button @click="DistributeClosed">取消</el-button>
        <el-button
          :loading="ChannelLoading"
          type="primary"
          @click="SessionRules({}, 'save', 0, 'Distribute')"
        >
          保存
        </el-button>
      </span>
    </el-dialog>

    <!-- 会话分配规则——默认规则对话框 -->
    <el-dialog
      title="默认规则"
      :visible.sync="isDefault"
      width="45%"
      @close="DefaultDistributeClosed"
    >
      <el-form
        :model="DistributeForm"
        :rules="DefaultFormRules"
        ref="DefaultDistribute"
        
        label-position="top"
      >
        <el-form-item label="规则名称" prop="ruleName">
          <el-input
            v-model="DistributeForm.ruleName"
            placeholder="请输入"
          ></el-input>
        </el-form-item>
        <el-form-item label="分配给" prop="candidateids">
          <el-select
            v-model="candidateids"
            style="width: 100%"
            multiple
            placeholder="请选择"
          >
            <el-option
              v-for="item in list"
              :key="item.customerServiceNumber"
              :label="item.customerServiceName"
              :value="item.customerServiceNumber"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="分配优先级" prop="distributePriority">
          <el-select
            style="width: 100%"
            v-model="DistributeForm.distributePriority"
            placeholder="请选择"
          >
            <el-option
              v-for="item in Rules.distributePriority"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <!-- 底部区域 -->
      <span slot="footer" class="dialog-footer">
        <el-button @click="DefaultDistributeClosed">取消</el-button>
        <el-button
          :loading="ChannelLoading"
          type="primary"
          @click="SessionRules({}, 'save', 0, 'DefaultDistribute')"
        >
          保存
        </el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { getRootWindowInitData } from '@src/util/window'
import { isOpenData } from '@src/util/platform'
import http from '@src/util/http';
import DeskNavBar from '../components/deskNavBar';
import * as ImApi from '@src/api/ImApi';
import { setClipboardData } from '@src/util/dom';
import Platform from '@src/platform';
import Rules from './Rules';
import { getRootWindow } from '@src/util/dom';
import Clipboard from 'clipboard';
import { getRules } from '@src/api/LinkcApi';
import Choice from './Choice.vue'

import ComponentNameEnum from '@model/enum/ComponentNameEnum.ts'
import WeiXinApplyTrailFeatureTag from '@src/modules/system/frame/component/WeiXinApplyTrailFeature/WeiXinApplyTrailFeatureTag.tsx'
import { useEdition } from '@hooks/useEdition.ts'

import { BaseSelectUserModeEnum } from '@src/component/common/BaseSelectUser'

export default {
  name: 'im-setting',
  inject: ['initData'],
  components: {
    DeskNavBar,
    [Choice.name]:Choice,
    [ComponentNameEnum.WeiXinApplyTrailFeatureTag]: WeiXinApplyTrailFeatureTag
  },
  data() {
    return {
      isOpenData,
      Rules,
      value1: false,
      pending: false,
      enabled: false,
      config: {
        welcomeMessage: '',
      },
      list: [],
      editDialogVisible: false,
      wxDialogVisibleTips: false,
      editForm: {
        id: '',
        relationUserId: '',
        customerServiceName: '',
        wechatServiceName: '',
        remark: '',
      },
      editFormRules: {
        customerServiceName: [
          {
            required: true,
            message: '请输入客服名称',
            trigger: ['blur', 'change'],
          },
        ],
      },
      // 订阅
      type: '',
      wechatList: [],
      subscribeDialogVisible: false,
      subscribeForm: {
        id: '',
        subscribeCustomerService: [],
      },
      subscribeFormRules: {
        subscribeCustomerService: [
          {
            required: true,
            message: '请选择订阅客服',
            trigger: ['blur', 'change'],
          },
        ],
      },
      hasWxAuth: '',
      // 微信客服授权
      wxDialogVisible: false,
      wxForm: {
        corpId: '',
      },
      wxFormRules: {
        corpId: [
          {
            required: true,
            message: '请输入企业ID',
            trigger: ['blur', 'change'],
          },
        ],
      },
      // 投放渠道管理
      AllPutChannel: [],
      // 获取添加投放渠道的客服链接的选项值
      RelationOptions: [],
      isChannel: false,
      ChannelDialogTitle: '',
      ChannelLoading: false,
      // 选中渠道是否为系统配置
      ChannelisSystem: 0,
      // 投放渠道管理——新增、编辑参数
      ChannelForm: {
        id: '',
        module: '',
        channelName: '',
        relationNo: '',
        remark: '',
      },
      ChannelFormRules: {
        channelName: [
          {
            required: true,
            message: '请输入渠道名称',
            trigger: ['blur'],
          },
        ],
      },
      // 会话分配规则列表
      DistributeRules: [],
      // 按客户信息时的客户字段下拉列表
      ApplyOptions: [],
      isDistribute: false,
      DistributeDialogTitle: '',
      DistributeFormOld: {},
      DistributeForm: {
        id: '',
        // 租户ID
        tenantId: '',
        // 规则名称
        ruleName: '',
        // 规则类型（1代表按照客户信息；2代表按照联系人信息）
        ruleType: 1,
        // 分配条件
        distributeCondition: {
          // 应用类型（customer代表按照客户信息；linkman代表按照联系人信息）
          apply: 'customer',
          // （仅支持等于/不等于两种；1代表等于；0代表不等于）
          equals: '',
          // 所选字段的选项值
          option: '',
          // 字段名
          fieldName: '',
          // 0代表已知；1代表未知（本字段仅适用于规则类型按联系人信息时）
          unknown: 0,
          // 1勾选 未绑定账号的客服不参与分配
          unRelationExcept: true,
        },
        // 分配给的客服
        /**
         * customerService 选择客服的编号（客服列表接口使用客服人员管理现有接口）
         * times : 客服的被分配次数；默认传0
         */
        candidate: [],
        candidateids: [],
        // 分配优先级（1代表按顺序平均分配；2代表今日会话数少优先分配）
        distributePriority: '',
        isSystem: 1,
      },
      candidateids: [],
      DistributeFormRules: {
        // 规则名称
        ruleName: [
          {
            required: true,
            message: '请输入规则名称',
            trigger: ['blur', 'change'],
          },
        ],
        // 分配给的客服
        candidateids: [
          {
            required: true,
            validator: (rules, value, callback) => {
              if (this.candidateids.length) {
                callback();
              } else {
                callback(new Error('请选择分配给的客服'));
              }
            },
            trigger: ['blur', 'change'],
          },
        ],
        // 分配优先级
        distributePriority: [
          {
            required: true,
            validator: (rules, value, callback) => {
              if (value) {
                callback();
              } else {
                callback(new Error('请选择分配优先级'));
              }
            },
            trigger: ['blur', 'change'],
          },
        ],
        // 客服链接
        distributeConditionOption: [
          {
            required: true,
            validator: (rules, value, callback) => {
              if (this.DistributeForm.distributeCondition.option) {
                callback();
              } else {
                callback(new Error('请选择客服链接'));
              }
            },
            trigger: ['blur', 'change'],
          },
        ],
      },
      // 默认规则
      isDefault: false,
      DefaultFormRules: {
        // 规则名称
        ruleName: [
          {
            required: true,
            message: '请输入规则名称',
            trigger: ['blur', 'change'],
          },
        ],
        // 分配给的客服
        candidateids: [
          {
            required: true,
            validator: (rules, value, callback) => {
              if (this.candidateids.length) {
                callback();
              } else {
                callback(new Error('请选择分配给的客服'));
              }
            },
            trigger: ['blur', 'change'],
          },
        ],
        // 分配优先级
        distributePriority: [
          {
            required: true,
            message: '请选择分配优先级',
            trigger: ['blur', 'change'],
          },
        ],
      },
      GetRules: {},
      unRelationExcept: true,
      // 部门数据
      bizTeamInfo: [],
    };
  },
  computed: {
    tenantType(){
      return getRootWindowInitData()?.tenantType
    },
    help_link(){
      let url = ''
      if(this.tenantType == 4) {
        url = 'https://publink-hz.feishu.cn/wiki/wikcnTwN86o7fsQjJj1tLJgDIId'
      } else {
        url = 'https://doc.shb.ltd/shb_aa2eox/gdboz9frgdlynqgx/yabn7zqbf12sg8c2/ucehq94e19f28mcs.html'
      }
      return url
    },
    customerServiceNumbers() {
      return this.list.map(item => {
        return {
          lable: item.customerServiceNumber,
          value: item.customerServiceNumber,
        };
      });
    },
    isOpenWeChatService() {
      // 微信客服功能灰度控制
      return this.initData?.openWeChatService;
    },
    // 会话分配规则-按客户信息
    optionList1() {
      const find = this.ApplyOptions.find(
        item =>
          item.fieldName === this.DistributeForm.distributeCondition.fieldName
      );
      return find ? find : { setting: { dataSource: [] } };
    },
    // 会话分配规则-按联系人信息
    optionList2() {
      const find = this.Rules.field.find(
        item =>
          item.fieldName === this.DistributeForm.distributeCondition.fieldName
      );
      return find ? find : { options: [] };
    },
  },
  setup() {
    const { isPayed, isNotPayed } = useEdition()
    
    return {
      isPayed,
      isNotPayed
    }
  },
  mounted() {
    this.init();
  },
  methods: {
    Authorization() {
      window.location.reload();
    },
    wxOauth() {
      // 微信客服授权
      http.get('/suite/kf/oauth').then(res => {
        const { status, message = '系统错误', data = {} } = res;
        if (status !== 0) return this.$platform.alert(message);
        const url = `https://work.weixin.qq.com/kf/third/auth/page?suite_id=${
          data.suiteId
        }&pre_auth_code=${data.preOauthCode}`;
        this.$platform.openLink(url);

        this.wxDialogVisible = false;
        this.wxDialogVisibleTips = true;
      });
    },
    async openIm() {
      const params = this.wxForm;
      const { code, message = '系统错误' } = await ImApi.relationCorp(params);
      if (code != 0) return this.$platform.alert(message);
      this.wxOauth();
    },
    getSubscribeCustomerService(item) {
      if (!item) return '';
      return item.subscribe.join();
    },
    copy(data = '') {
      setClipboardData(
        data,
        () => {
          Platform.notification({
            message: '复制成功',
            type: 'success',
          });
        },
        () => {
          Platform.notification({
            message: '复制失败',
            type: 'warning',
          });
        }
      );
    },
    // 获取初始化数据
    init() {
      getRules().then(res => {
        if (res.status === 200) {
          this.GetRules = res.data;
          // 把首页路由换成客服聊天路由
          if (this.GetRules.protalUrl) {
            let index = this.GetRules.protalUrl.lastIndexOf('/');
            this.GetRules.protalUrl = `${this.GetRules.protalUrl.slice(
              0,
              index + 1
            )}chat`;
          }
        }
      });
      this.getTenantImSetting();
      this.getAllCustomerService();
      // 会话分配规则列表
      this.DistributeFormOld = JSON.parse(JSON.stringify(this.DistributeForm));
      this.getDistributeRules();
      this.queryApplyOptions();
      // 获取所有投放渠道
      this.getAllPutChannel();
      // 获取添加投放渠道的客服链接的选项值
      this.getRelationOptions();
      if (this.isOpenWeChatService) {
        // 获取微信客服授权结果
        this.getAuthFlag();
      }
    },
    getAuthFlag() {
      ImApi.getAuthFlag().then(res => {
        const { code, message = '系统错误', data } = res;
        if (code !== 0) return this.$platform.alert(message);
        this.hasWxAuth = data;
        if (data == 1) this.getWeChatKFList();
      });
    },
    getAllCustomerService() {
      ImApi.getAllCustomerService().then(res => {
        const { code, message = '系统错误', data = [] } = res;
        if (code !== 0) return this.$platform.alert(message);
        this.list = data;
      });
    },
    getWeChatKFList() {
      ImApi.getWeChatKFList().then(res => {
        const { code, message = '系统错误', data = [] } = res;
        if (code !== 0) return this.$platform.alert(message);
        this.wechatList = data;
      });
    },
    // 会话分配规则列表
    getDistributeRules(Reorder = false) {
      ImApi.getDistributeRules().then(res => {
        const { code, message = '系统错误', data = [] } = res;
        if (code !== 0) return this.$platform.alert(message);
        this.DistributeRules = data.map(item => {
          item.isEnabled = !!item.enabled;
          return item;
        });
        // 删除数据后重新排序
        if (Reorder) {
          this.adjustLevel('index');
        }
      });
    },
    // 按客户信息时的客户字段下拉列表
    queryApplyOptions() {
      const rootWindow = getRootWindow(window);
      let tenantId = JSON.parse(rootWindow._init).user.tenantId;

      ImApi.queryApplyOptions({
        tenantId,
        applyType: 'customer',
      }).then(res => {
        let { code, message = '系统错误', data = [] } = res;
        if (code !== '200') return this.$platform.alert(message);
        // 系统数据配置选择
        data = data.map(item => {
          item.equals = [
            {
              label: '等于',
              value: 1,
            },
            {
              label: '不等于',
              value: 0,
            },
          ];
          return item;
        });
        this.ApplyOptions = [...data, ...Rules.ApplyOptions];
      });
    },
    // 会话规则增删改查、开启
    SessionRules(info, type, index, ref) {
      switch (type) {
      // 新增
      case 'add': {
        this.DistributeDialogTitle = '新增规则';
        this.isDistribute = true;
        break;
      }
      // 修改
      case 'edit': {
        this.DistributeDialogTitle = '编辑规则';
        // 获取分配规则单条详情
        ImApi.getDistributeRuleInfo({ id: info.id }).then(res => {
          const { code, message = '系统错误', data = {} } = res;
          if (code !== 0) return this.$platform.alert(message);
          // 默认规则打开，默认规则弹窗
          if (info.isSystem === 1) {
            this.isDefault = true;
          } else {
            this.isDistribute = true;
          }
          this.DistributeForm = data;
          // 未绑定账号的客服不参与分配
          if (this.DistributeForm.distributeCondition.unRelationExcept) {
            this.unRelationExcept = true;
          } else {
            this.unRelationExcept = false;
          }
          // 获取客服ids
          this.candidateids = data.candidate.map(
            customer => customer.customerService
          );
        });
        break;
      }
      // 删除
      case 'close': {
        this.$confirm('确认删除该规则？', '删除', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
        }).then(() => {
          ImApi.removeDistributeRule([info.id]).then(res => {
            const { code, message = '系统错误' } = res;
            if (code !== 0) return this.$platform.alert(message);
            this.getDistributeRules(true);
          });
        });
        break;
      }
      // 升级
      case 'up': {
        // 第一级不升级
        if (index !== 0) {
          let Distribute = this.DistributeRules;
          Distribute[index].level -= 1;
          Distribute[index - 1].level += 1;
          // Distribute数组内对换位置
          [Distribute[index - 1], Distribute[index]] = [
            Distribute[index],
            Distribute[index - 1],
          ];
        }
        break;
      }
      // 降级
      case 'down': {
        // 最后一级不降级
        if (index !== this.DistributeRules.length - 1) {
          let Distribute = this.DistributeRules;
          Distribute[index].level += 1;
          Distribute[index + 1].level -= 1;
          [Distribute[index], Distribute[index + 1]] = [
            Distribute[index + 1],
            Distribute[index],
          ];
        }
        break;
      }
      // 开关
      case 'switch': {
        ImApi.modifyDistributeRuleEnabled({
          enabled: info.enabled === 1 ? 0 : 1,
          id: info.id,
        }).then(res => {
          const { code, message = '系统错误' } = res;
          if (code !== 0) return this.$platform.alert(message);
          this.getDistributeRules();
        });
        break;
      }
      // 保存
      case 'save': {
        this.$refs[ref].validate(valid => {
          if (valid) {
            //  根据获取客服ids回填客服数据
            let candidate = [];
            for (let id of this.candidateids) {
              candidate.push({ customerService: id, times: 0 });
            }
            this.DistributeForm.candidate = candidate;

            // 按客服链接
            if (this.DistributeForm.ruleType === 3) {
              this.DistributeForm.distributeCondition.equals = '';
              this.DistributeForm.distributeCondition.fieldName = 'link';
            }

            // 未绑定账号的客服不参与分配
            if (this.unRelationExcept) {
              this.DistributeForm.distributeCondition.unRelationExcept = 1;
            } else {
              this.DistributeForm.distributeCondition.unRelationExcept = 0;
            }

            this.DistributeForm.distributeCondition.apply = [
              '',
              'customer',
              'linkman',
              'link',
            ][this.DistributeForm.ruleType];

            if (this.DistributeForm.id) {
              // 编辑
              if (ref === 'DefaultDistribute') {
                // 默认系统规则不传
                this.DistributeForm.ruleType = '';
              }
              ImApi.modifyDistributeRule(this.DistributeForm).then(res => {
                const { code, message = '系统错误' } = res;
                if (code !== 0) return this.$platform.alert(message);
                this.getDistributeRules();
                this.isDefault = false;
                this.isDistribute = false;
                this.DistributeForm = JSON.parse(
                  JSON.stringify(this.DistributeFormOld)
                );
              });
            } else {
              // 新增
              const rootWindow = getRootWindow(window);
              let tenantId = JSON.parse(rootWindow._init).user.tenantId;

              this.DistributeForm.tenantId = tenantId;

              ImApi.addDistributeRule(this.DistributeForm).then(res => {
                const { code, message = '系统错误' } = res;
                if (code !== 0) return this.$platform.alert(message);
                this.getDistributeRules();
                this.isDefault = false;
                this.isDistribute = false;
                this.DistributeForm = JSON.parse(
                  JSON.stringify(this.DistributeFormOld)
                );
              });
            }
          }
        });
        break;
      }
      default:
        console.warn('type error:', type);
      }
      // 排序请求
      if (type === 'up' || type === 'down') {
        this.adjustLevel('level');
      }
    },
    adjustLevel(key = 'index') {
      let data = this.DistributeRules.map((item, index) => {
        return {
          id: item.id,
          level: key === 'index' ? index + 1 : item[key],
        };
      });
      ImApi.adjustLevel(data).then(res => {
        const { code, message = '系统错误' } = res;
        if (code !== 0) return this.$platform.alert(message);
        this.getDistributeRules();
      });
    },
    // 规则类型规则类型切换，去除且字段与当客户字段中数据。两边选择框数据源不同，会显示value
    ruleTypeChange() {
      this.DistributeForm.distributeCondition.fieldName = '';
      this.DistributeForm.distributeCondition.equals = '';
      this.DistributeForm.distributeCondition.option = '';
    },
    DistributeClosed() {
      this.isDistribute = false;
      this.$refs.Distribute.resetFields();
      this.DistributeForm = JSON.parse(JSON.stringify(this.DistributeFormOld));
    },
    DefaultDistributeClosed() {
      this.isDefault = false;
      this.DistributeForm = JSON.parse(JSON.stringify(this.DistributeFormOld));
      this.$refs['DefaultDistribute'].resetFields();
    },
    // 获取所有投放渠道
    getAllPutChannel() {
      ImApi.getAllPutChannel().then(res => {
        const { code, message = '系统错误', data = [] } = res;
        if (code !== 0) return this.$platform.alert(message);
        this.AllPutChannel = data;
      });
    },
    getRelationOptions() {
      ImApi.getRelationOptions().then(res => {
        const { code, message = '系统错误', data = [] } = res;
        if (code !== 0) return this.$platform.alert(message);
        this.RelationOptions = data;
      });
    },
    // 投放渠道增删改查
    Channel(info = {}, type) {
      switch (type) {
      // 修改
      case 'edit': {
        this.ChannelDialogTitle = '编辑渠道';
        this.ChannelForm.id = info.id;
        this.isChannel = true;
        this.ChannelisSystem = info.isSystem;
        for (let i in this.ChannelForm) {
          if (Reflect.has(info, i)) this.ChannelForm[i] = info[i];
        }
        break;
      }
      // 删除
      case 'delete': {
        this.$confirm('删除后不能恢复，确认是否删除？', '删除', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
        }).then(() => {
          ImApi.removePutChannel([info.id]).then(res => {
            const { code, message = '系统错误' } = res;
            if (code !== 0) return this.$platform.alert(message);
            this.$message({
              showClose: true,
              message: '删除成功',
              type: 'success',
            });
            // 重新获取列表数据
            this.getAllPutChannel();
          });
        });
        break;
      }
      // 新增
      case 'add': {
        this.ChannelDialogTitle = '新建渠道';
        this.isChannel = true;
        break;
      }
      // 保存
      case 'save': {
        this.$refs['ChannelRef'].validate(valid => {
          if (valid) {
            // 开启按钮loading
            this.ChannelLoading = true;
            const fn = res => {
              this.ChannelLoading = false;
              const { code, message = '系统错误' } = res;
              if (code !== 0) return this.$platform.alert(message);
              this.$message({
                showClose: true,
                message: `${this.ChannelForm.id ? '编辑' : '新增'}成功`,
                type: 'success',
              });
              this.isChannel = false;
              // 重新获取列表数据
              this.getAllPutChannel();
            };
            if (this.ChannelForm.id) {
              // 编辑
              ImApi.modifyPutChannel(this.ChannelForm)
                .then(fn)
                .catch(() => {
                  this.ChannelLoading = false;
                });
            } else {
              // 新增
              ImApi.addPutChannel(this.ChannelForm)
                .then(fn)
                .catch(() => {
                  this.ChannelLoading = false;
                });
            }
          }
        });
        break;
      }
      default:
        console.warn('type error:', type);
      }
    },
    // 新增修改渠道弹窗关闭
    ChannelClosed() {
      this.$refs['ChannelRef'].resetFields?.();
      this.ChannelisSystem = 0;
      for (let i in this.ChannelForm) this.ChannelForm[i] = '';
    },
    relationNoChange(info) {
      const { optionNo = info, module = '' } = this.RelationOptions.find(
        item => item.optionNo === info
      );
      this.ChannelForm.relationNo = optionNo;
      this.ChannelForm.module = module;
    },
    async getTenantImSetting() {
      try {
        const {
          code,
          message = '系统错误',
          data = {},
        } = await ImApi.getTenantImSetting();
        if (code !== 0) return this.$platform.alert(message);
        this.enabled = data?.enabled;
        // this.config.welcomeMessage = data?.config?.welcomeMessage;
        // this.config.receiveConversationLimit = data?.config?.receiveConversationLimit
        this.config = data.config
      } catch (error) {
        console.error('error', error);
      }
    },
    async changeEnabled(enabled) {
      const params = { enabled };
      try {
        const { code, message = '系统错误' } = await ImApi.modifyImSetting(
          params
        );
        if (code !== 0) return this.$platform.alert(message);
      } catch (error) {
        console.error('error', error);
      }
    },
    editDialogClosed() {
      this.$refs.editFormRef.resetFields();
    },
    subscribeDialogClosed() {
      this.$refs.subscribeFormRef.resetFields();
    },
    wxDialogClosed() {
      this.$refs.wxFormRef.resetFields();
    },
    showEditDialog(item, type) {
      this.type = type;
      this.editDialogVisible = true;
      this.editForm.id = item.id;
      this.editForm.remark = item.remark;
      if (type == 'weChat') {
        // 微信客服
        this.editForm.wechatServiceName = item.wechatServiceName;
      } else {
        this.editForm.relationUserId = item.relationUserId;
        this.editForm.customerServiceName = item.customerServiceName;
      }
    },
    showSubscribeDialog(item) {
      this.subscribeDialogVisible = true;
      this.subscribeForm.id = item.id;
      this.subscribeForm.subscribeCustomerService = item.subscribeCustomerService.subscribe;
    },
    edit() {
      // 编辑客服名称
      this.$refs.editFormRef.validate(async valid => {
        if (!valid) return;
        const params = this.editForm;
        try {
          const editPromise = this.type == 'weChat'
            ? ImApi.modifyWeChatKF(params)
            : ImApi.modifyCustomerService(params);
          const { code, message = '系统错误' } = await editPromise;
          if (code !== 0) return this.$platform.alert(message);
          this.$refs.editFormRef.resetFields();
          this.editDialogVisible = false;
          this.type == 'weChat'
            ? this.getWeChatKFList()
            : this.getAllCustomerService();
          this.getAllPutChannel();
          this.getRelationOptions();
          this.$platform.notification({
            title: '保存成功',
            type: 'success',
          });
        } catch (e) {
          console.error(e);
        }
      });
    },
    /** 
     * @deprecated
    */
    bind(item) {
      const options = {
        title: '请选择人员',
        seeAllOrg: true,
        showDeleteUser: false,
        max: 1,
        mode: BaseSelectUserModeEnum.Filter
      };
      
      this.$fast.select.single.user(options)
        .then(result => {
          if (result.status == 0) {
            let data = result.data || {};
            let users = data.users || [];
            const relationUserId = users[0].userId;
            const relationUserStaffId = users[0].staffId;
            const relationUserName = users[0].displayName;

            ImApi.bindCustomerService({ id: item.id, relationUserId }).then(
              res => {
                if (res.code !== 0) return this.$platform.alert(res.message);
                this.list.forEach(c => {
                  if (c.id === item.id) {
                    c.relationUserId = relationUserId;
                    c.relationUserStaffId = relationUserStaffId;
                    c.relationUserName = relationUserName;
                  }
                });
                this.$platform.notification({
                  title: '绑定成功',
                  type: 'success',
                });
              }
            );
          }
        })
        .catch(err => console.error(err));
    },
    async subscribe() {
      const { id, subscribeCustomerService } = this.subscribeForm;
      if (!subscribeCustomerService.length)
        return this.$platform.alert('至少订阅一个客服');
      const params = { id };
      params.subscribeCustomerService = {
        subscribe: subscribeCustomerService,
      };
      const { code, message } = await ImApi.subscribeKF(params);
      if (code !== 0) return this.$platform.alert(message);
      this.$refs.subscribeFormRef.resetFields();
      this.subscribeDialogVisible = false;
      this.getWeChatKFList();
    },
    async unBind(item) {
      try {
        if (!(await this.$platform.confirm('确认要解绑吗？'))) return;
        const { code, message } = await ImApi.unBindCustomerService({
          id: item.id,
          relationUserId: null,
        });
        if (code !== 0) return this.$platform.alert(message);
        this.list.forEach(c => {
          if (c.id === item.id) {
            c.relationUserId = null;
            c.relationUserName = null;
            c.relationUserStaffId = null;
          }
        });
        this.$platform.notification({
          title: '解绑成功',
          type: 'success',
        });
      } catch (e) {
        console.error(e);
      }
    },
    async save() {
      // 保存欢迎语内容
      const params = { config: this.config };
      try {
        const { code, message = '系统错误' } = await ImApi.modifyImSetting(
          params
        );
        if (code !== 0) return this.$platform.alert(message);
        this.$platform.notification({
          title: '保存成功',
          type: 'success',
        });
      } catch (error) {
        console.error('error', error);
      }
    },
    // 外部分享，将连接添加至剪切板
    async outlineShare(copyurl) {
      // 外部文章选择外部分享时
      this.shareBoxShow = false;
      let url = copyurl;

      let body = document.getElementsByTagName('body')[0];

      let copyFrom = document.createElement('a');
      copyFrom.setAttribute('id', 'target');
      copyFrom.setAttribute('target', '_blank');
      copyFrom.setAttribute('href', url);
      copyFrom.innerHTML = url;

      body.appendChild(copyFrom);

      // 创建按钮
      let agent = document.createElement('button');
      // body增加超链接
      body.appendChild(copyFrom);
      // body增加按钮
      body.appendChild(agent); // 采用Clipboard.js方案 // trouble：没有可以传入的HTML元素，但我们可以动态创建一个DOM对象作为代理，复制超链接
      let clipboard = new Clipboard(agent, {
        target() {
          return document.getElementById('target');
        },
      });

      clipboard.on('success', function(e) {
        Platform.notification({
          message: '复制成功',
          type: 'success',
        });
      });

      clipboard.on('error', function(e) {
        Platform.notification({
          message: '分享失败，请重新操作',
          type: 'success',
        });
      });
      // 点击按钮
      agent.click();
      // 移除创建的元素
      body.removeChild(copyFrom);
      body.removeChild(agent);
    },
    bizTeam(event) {
      // this.DistributeForm.distributeCondition.option = []
      for (let item of event) {
        this.DistributeForm.distributeCondition.option.push(item.id);
      }
    },
  },
};
</script>
<style>
.el-form-item--small.el-form-item:last-child {
  margin-bottom: 0;
}
</style>
<style lang="scss" scoped>
.im-setting {
  min-width: 730px;
  padding: 20px;
  width: 100%;
  background: #ffffff;
  border-radius: 4px;

  .im-setting-table-header-title {
    display: flex;
    align-items: center;
  }
  .selects {
    width: 100%;
    display: flex;
    justify-content: space-between;
  }
  .Copywriter {
    font-size: 14px;
    font-weight: 400;
    color: #8c8c8c;
    margin-bottom: 2px;
  }
  .href {
    text-decoration: underline;
    cursor: pointer;
  }
  .iconWarning {
    cursor: pointer;
    font-size: 13px;
    color: #909399;
    margin-left: 10px;
    display: inline;
  }

  .im-setting-button {
    width: 100%;
    margin-bottom: 10px;
    text-align: right;
  }

  .im-setting-switch-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
    a {
      color: $color-primary-light-6;
    }
  }

  .im-setting-table {
    margin-bottom: 10px;
    h4 {
      display: flex;
    }
    .desk-setting-table-header {
      display: flex;
      align-items: center;
      margin-bottom: 6px;
      justify-content: space-between;
    }

    i {
      cursor: pointer;
      font-size: 13px;
      color: #909399;
      margin-left: 10px;
    }
  }

  h4 {
    margin: 24px 0px 8px 0px;
    font-size: 15px;
  }
  h4:first-child {
    margin: 4px 0px 8px 0px;
  }

  .im-setting-tip {
    p {
      margin-bottom: 5px;
    }
  }

  .welcome-setting {
    width: 100%;
    .welcome-container {
      display: flex;
      align-items: center;
    }
    .welcome-content {
      flex: 1;
      margin-right: 10px;
    }
  }
  .select-customer-service {
    width: 100%;
  }
  .wx_auth_dialog {
    a {
      color: $color-main;
    }
  }
  .Operation {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: flex-end;
    align-items: center;
  }
  ::v-deep .el-textarea__inner {
    height: 68px !important;
  }
  .OperationContent {
    background: #f5f5f5;
    padding: 21px 16px;
    border-radius: 4px;
  }
  // ::v-deep .el-table__body-wrapper {
  //     border-right: 1px solid #ebeef5;
  //     border-bottom: 1px solid #ebeef5;
  // }
  // ::v-deep .el-table{
  //   border-top: 1px solid #ebeef5;
  //   border-left: 1px solid #ebeef5;
  // }
  ::v-deep .el-table--border {
    border: 1px solid #ebeef5;
  }
}
</style>
